@extends('home.layout.base')

@section('content')
@include('home.store.storeHeader')
<div class="main" id="servicePartners"  v-cloak>
    <div class="servicePartners1">
    <div v-for="(item,index) in storePartners">
        <img :src="item" alt="">
    </div>
    </div>
</div>
<style>
    #servicePartners {
        /*display: grid;*/
        /*width: 1200px;*/
        /*margin: 40px auto;*/
        /*grid-column-gap: 37px;*/
        /*justify-content: center;*/
        /*grid-row-gap: 30px;*/
        /*grid-template-columns: repeat(4, 260px);*/
        /*min-height: 700px;*/
        /*background: #fff;*/
        /*padding-top: 30px;*/


        width: 1200px;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 200px;
        min-height: 800px;
        background: #fff;
        padding: 20px;
    }
    .servicePartners1{
        display: grid;
        grid-template-columns: repeat(4, 260px);
        grid-row-gap: 30px;
        grid-column-gap: 37px;
    }
    .servicePartners1>div {
        padding: 20px;
        height: 160px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid #ddd;
    }

    .servicePartners1>div>img {
        width: 100%;
        height: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#servicePartners',
            data: () => {
                return {
                    storeId: getQueryString("id"),
                    storePartners: [],

                }
            },
            created() {
                let storeDetailData = {
                    id: this.storeId
                }
                apiAjax("{{ route('home.store.partnersApi')}}", 'get', storeDetailData, (res) => {
                    if (res.code == 0) {
                        this.storePartners = res.data.partners;
                    } else {}
                }, (erro) => {});
            },
            mounted() {},
            methods: {}
        })
    })
</script>
@endsection